<!--
 * @Author: cqg
 * @Date: 2020-12-08 14:02:19
 * @LastEditors: xjt
 * @LastEditTime: 2020-12-24 10:43:56
 * @Description: file content
-->
<template>
  <basic-container>
    <dataList
      :pageInfo="pager"
      :filterList="filterList"
      :listData="tableData"
      :selectData="selectDataArr"
      placeholder="搜索工程名称"
      :menuList="[{export:'导出'}]"
      searchName="projectName"
      @menu-click="handleMenuClick"
      openSelection
    >
      <el-table ref="multipleTable" align="left" :data="tableData" @selection-change="$event => (selectDataArr = $event)">
        <el-table-column type="selection" width="55" />
        <el-table-column label="工程名称" width="220" prop="projectName" show-overflow-tooltip/>
        <el-table-column label="工程地址" prop="projectAddress" min-width="200" show-overflow-tooltip/>
        <el-table-column label="工程类型" width="150" prop="projectType" :formatter="dataFormatter" />
        <el-table-column label="代建单位" prop="agentInfo" width="200" show-overflow-tooltip/>
        <el-table-column label="单位联系人" prop="agentContact" width="150" />
        <el-table-column label="联系电话" prop="agentPhone" width="180" />
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button @click="handleMenuClick('preview', scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </dataList>
    <diaLog ref="dialog" />
  </basic-container>
</template>

<script>
import { query } from "./api.js";
import diaLog from "./dialog.vue";
import { getDict } from "@/utils";

export default {
  provide () {
    return {
      initList: this.queryData
    };
  },
  components: {
    diaLog
  },

  data () {
    return {
      // 表格列表数据
      tableData: [],
      // 选中的数据
      selectDataArr: [],
      // 请求参数
      params: {
        current: 1,
        size: 10,
        projectName: ""
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      //筛选项
      filterList: [
        {
          label: "录入日期",
          inputType: "daterange",
          name: ["createTimeStart", "createTimeEnd"]
        },
        {
          label: "合同签订日期",
          inputType: "daterange",
          name: ["contractDateStart", "contractDateEnd"]
        },
        {
          label: "决算日期",
          inputType: "daterange",
          name: ["finalDateStart", "finalDateEnd"]
        },
        {
          label: "工程类型",
          inputType: "dict",
          dictName: "epc_project_type",
          name: "projectType",
          multiple: true
        }
      ]
    };
  },
  beforeMount () {
    this.queryData();
  },
  methods: {
    // 数据请求
    queryData (params = {}) {
      let req = { ...this.params, ...params };
      query(req).then(res => {
        const { current, size, total, records } = res.data.data;
        this.tableData = records;
        this.params = req;
        this.pager = { total, current, size };
      });
    },
    // 菜单点击监听
    handleMenuClick (type, row) {
      switch (type) {
        case "export":
          this.publicExport('工程信息概览列表', '/api/epcprojectoverview/download', this.params)
          break;
        case "preview":
          this.$refs.dialog.show(row);
          break;
      }
    },
    //格式化表格字典值
    dataFormatter (row, column, callValue) {
      let type = "";
      switch (column.property) {
        //工程类型
        case "projectType":
          type = getDict("epc_project_type").find(
            item => item.value == callValue
          );
          return type ? type.label : "";
      }
    }
  }
};
</script>
